<template>
  <!--<div id="bar">-->
    <!--<div class="out">-->
      <!--<div class="in">-->
        <!--<div>-->
          <!--<span class="text-size-lg-lg" v-show="progressShow">{{progress}}</span>-->
          <!--<span v-show="startShow">点击这里启动</span>-->
          <!--<span calss="text-size-sm" v-show="textShow">{{text}}</span>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->
  <!--</div>-->
  <div id="bar">
    <div class="circle-wrapper">
      <div class="warp left-warp">
        <div class="left" id="left"></div>
      </div>
      <div class="warp right-warp">
        <div class="right" id="right"></div>
      </div>
      <div class="text">
        <div>
          <div>
            <span class="text-size-lg-lg">{{percentText}}</span><br>
            <span v-if="end">已完成</span>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default{
    name:'bar',
    data(){
      return {
        percent:this.$store.state.percent
      }
    },
    computed:{
//      progressShow:function(){
//        if(this.progress){
//          return this.progressShow = true;
//        }else{
//          return this.progressShow = false;
//        }
//      },
//      startShow:function(){
//        if(!this.progressShow && !this.textShow){
//          return this.startShow = true;
//        }else{
//          return this.startShow = false;
//        }
//      },
//      textShow:function(){
//        if(this.text){
//          return this.textShow = true;
//        }else{
//          return this.textShow = false;
//        }
//      },
      percentText:function(){
        return this.percentText = this.percent+"%"
      },
      end:function(){
        return this.percent < 100 ? false : true;
      }
    },
    methods:{
      change:function(){
        if(this.percent <= 50){
          let num = parseInt(this.percent)*3.6-135;
          var key=document.styleSheets[0].cssRules[0];
          key.deleteRule("50%,100%");
          key.appendRule('50%,100%{ -webkit-transform: rotate('+num+'deg);}');
          document.getElementById("right").style.animation = "cicleProgressLoad_right 1.5s linear forwards";
        }else{
          let percent = this.percent - 50;
          let num = parseInt(percent)*3.6-135;
//          var key=document.styleSheets[0].cssRules[0];
//          key.deleteRule("50%,100%");
//          key.appendRule('50%,100%{ -webkit-transform: rotate(45deg);}');
//          document.getElementById("right").style.animation = "cicleProgressLoad_right 1.5s linear forwards";
          var key=document.styleSheets[0].cssRules[1];
          key.deleteRule("100%");
          key.appendRule('100%{ -webkit-transform: rotate('+num+'deg);}');
          document.getElementById("left").style.animation = "circleProgressLoad_left 1.5s linear forwards";
//          document.getElementById("right").style.transform = "rotate(45deg)"
//          document.getElementById("left").style.transform = "rotate("+num+"deg)"
        }
      }
    },
    mounted:function(){
      this.change()
    }
  }
</script>
<style id="style">

</style>
<style lang="less" scoped>
  @import '../assets/css/variables.less';
  .circle-wrapper{
    position:relative;
    width:200px;height:200px;
    border-radius: 50%;
    background:#eee;
    /*border:1px solid #ddd;*/
    margin:0 auto;}
  .warp{
    position:absolute;
    z-index: 20;
    width:100px;
    height:200px;
    top:0;
    overflow: hidden;
  }
  div.text{
    display: inline-block;
    width:160px;
    height:160px;
    position:absolute;
    top:20px;
    left:20px;
    z-index: 100;
    border-radius: 50%;
    background:linear-gradient(270deg,@green 0%,@turquoise 100%);
    color:@white;
  }
  div.text>div{
    width:100%;
    height:160px;
    display:table;
  }

  div.text>div>div{
    display: table-cell;
    text-align: center;
    margin:0 auto;
    vertical-align: middle;
  }

  .left-warp{
    left:0;
    /*border-left:3px solid #eee;*/
  }
  .right-warp{
    right:0;
    /*border-right:1px solid #eee;*/
  }
  .left,.right{
    position: absolute;
    top:0;
    width:160px;
    height:160px;
    border-radius: 50%;
    border:20px solid transparent;
    -webkit-transform: rotate(-135deg);
  }
  .left{
    left:0;
    border-bottom-color:@green-green;
    border-left-color:@green-green;
  }
  .right{
    right:0;
    border-top-color:@green-green;
    border-right-color:@green-green;
    /*transform: rotate(45deg);*/
    -webkit-animation: cicleProgressLoad_right 1.5s linear forwards;
  }
  /*.left{*/
    /*transform: rotate(-135deg);*/
  /*}*/
  /*@-webkit-keyframes cicleProgressLoad_right {*/

    /*0%{*/
      /*-webkit-transform: rotate(-135deg);*/
    /*}*/
    /*100%{*/
      /*-webkit-transform: rotate(45deg);*/
    /*}*/
  /*}*/
</style>
